<template>
  <div class="content-wrap">
    <Card>
      <div slot="title">
        <Form :label-width="40" inline>
          <FormItem label="城市">
            <Cascader :data="cityList" :value="currentCityList" @on-change="handleChange" style="width: 200px;" />
          </FormItem>
          <Button type="primary" @click="handleSave">保存</Button>
        </Form>
      </div>
      <div class="chart-box">
        <e-heatmap :chartData="eHeatmapData" :drawing="true" @checkArea="handleMapCheckArea" />
        <Spin fix v-show="eHeatmapLoading">数据加载中...</Spin>
      </div>
    </Card>
  </div>
</template>

<script>
import { merge, each, subtract, last } from 'lodash'
import { eHeatmapOptions } from './chartOptions'
import { fetchFBChartData } from '@/api/meterManagedistribution'
import { fetchSaveUserParams } from '@/api/user'

export default {
  name: 'SysSetting',
  components: {
    EHeatmap: () => import('@/commons/charts/EHeatmap')
  },
  data() {
    return {
      cityList: [],
      eHeatmapList: [],
      eHeatmapLoading: false,
      saveData: {}
    }
  },
  created() {
    this.getCityList()
    this.getEHeatmapList()
  },
  computed: {
    eHeatmapData() {
      const _serList = []
      each(this.eHeatmapList, item => {
        const { longitude, latitude, meterId, mark, ...rest } = item
        _serList.push({
          name: meterId,
          value: [longitude, latitude, 1],
          ...rest
        })
      })
      return merge({}, eHeatmapOptions, {
        bmap: {
          center: this.$store.getters.mapCenter
        },
        series: [
          {
            data: _serList
          }
        ]
      })
    },
    currentCityList() {
      const { provinceId, cityId } = this.$store.getters.userSetting
      if (provinceId && cityId) {
        return [provinceId, cityId]
      }
      return []
    }
  },
  methods: {
    async getCityList() {
      const { code, date } = await this.$store.dispatch('loadCityList')
      if (code === 200) {
        this.cityList = date
      } else {
        this.cityList = []
      }
    },
    handleChange(value, selectedData) {
      const cityId = last(value)
      this.saveData = {
        ...this.$store.getters.userSetting,
        ...this.saveData,
        cityId
      }
    },
    async getEHeatmapList() {
      this.eHeatmapLoading = true
      const { code, date } = await fetchFBChartData()
      this.eHeatmapLoading = false
      if (code === 200) {
        this.eHeatmapList = date
      } else {
        this.eHeatmapList = []
      }
    },
    handleMapCheckArea(data = {}) {
      const { xMinSize, xMaxSize, yMinSize, yMaxSize } = data
      const lat = subtract(xMaxSize, xMinSize) / 2 + xMinSize
      const lng = subtract(yMaxSize, yMinSize) / 2 + yMinSize
      this.saveData = {
        ...this.$store.getters.userSetting,
        ...this.saveData,
        lat,
        lng
      }
    },
    async handleSave() {
      const { code, msg } = await fetchSaveUserParams(this.saveData)
      if (code === 200) {
        this.$Message.success(msg)
        this.$store.dispatch('loadUserSetting')
      } else {
        this.$Message.error(msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content-wrap {
  padding: 10px;

  .chart-box {
    width: 100%;
    height: 100%;
  }
}
</style>
